<template>
  <publicPage>
    <view class="confirmOrder">
      <view class="alertPos">
        <u-alert type="warning" :title="alertTitle" center> </u-alert>
      </view>

      <view class="pt-38">
        <u-cell title="发起人" :border="false">
          <view slot="value" style="max-width: 400rpx" class="color6 ov-1">
            {{ orderObj.sponsor || orderObj.sponsorStr || "" }}
          </view>
        </u-cell>
        <view class="borderB mx-15"></view>
        <u-cell title="咨询人" :border="false">
          <view slot="value" style="max-width: 400rpx" class="color6">
            <text>{{ orderObj.username || userInfo.userName || "" }}</text>
          </view>
        </u-cell>
        <view class="borderB mx-15"></view>
        <u-cell title="联系电话" :border="false">
          <view slot="value" style="max-width: 400rpx" class="color6">
            <text>{{ orderObj.userphone || userInfo.mobile || "" }}</text>
          </view>
        </u-cell>
      </view>
      <view class="borderTop30 px-15">
        <view class="linh-50 fz-16">会诊专家({{ orderObj.expList.length || 0 }}人)
        </view>
        <view
          v-for="(item, index) in orderObj.expList"
          :key="index"
          class="disFlx forBox"
        >
          <view class="leftBox">
            <u-image
              :src="item.headimg"
              width="180rpx"
              height="180rpx"
              mode="aspectFill"
            ></u-image>
          </view>
          <view class="rightBox">
            <view>
              <view>
                <text class="color3 fz-16">{{ item.userName || "" }}</text>
                <text class="fz-16 pl-15">{{ item.postName || "" }}</text>
                <text class="pl-15">{{ item.deptname || "" }}</text>
              </view>
              <view class="pt-2">
                <text>{{ item.com || "" }}</text>
              </view>
            </view>
            <view style="color: #ff5f5f" class="fw-6">
              <text>{{ item.newcost || 0 }}云豆</text>

              <template v-if="orderObj.callType == 2">
                <text
                  class="pl-10 fw-4 color9 fz-12"
                  style="text-decoration: line-through"
                  v-if="item.newcost !== item.makeCost"
                  >{{ item.makeCost || 0 }}云豆</text
                >
                <text
                  v-if="item.newcost !== item.makeCost"
                  class="pl-15 fw-4 color9 fz-12"
                  >{{ item.iscom ? "(合作单位折扣)" : "(本单位)" }}</text
                >
              </template>
              <template v-else>
                <text
                  class="pl-10 fw-4 color9 fz-12"
                  style="text-decoration: line-through"
                  v-if="item.newcost !== item.cost"
                  >{{ item.cost || 0 }}云豆</text
                >
                <text
                  v-if="item.newcost !== item.cost"
                  class="pl-15 fw-4 color9 fz-12"
                  >{{ item.iscom ? "(合作单位折扣)" : "(本单位)" }}</text
                >
              </template>
            </view>
          </view>
        </view>
        <view class="disFlxJS linh-26">
          <view>咨询类型</view>
          <view class="color6">
            {{
              orderObj.callType == 3
                ? "服务项目"
                : orderObj.callType == 2
                ? "预约咨询"
                : "即时咨询"
            }}
          </view>
        </view>
        <view class="disFlxJS linh-26">
          <view>咨询费用</view>
          <view class="color6">
            <text class="pr-5">{{ orderObj.costOriginal || 0 }}</text>
            <text>云豆</text>
          </view>
        </view>
        <view class="disFlxJS linh-26">
          <view>优惠金额</view>
          <view class="color6">
            <text class="pr-5">{{ orderObj.costOriginal === orderObj.cost ? 0 : minus(orderObj.costOriginal,orderObj.cost) }}</text>
            <text>云豆</text>
          </view>
        </view>
        <view class="disFlxJS linh-26 pb-10">
          <view>需付款</view>
          <view style="color: #ff5f5f" class="fw-6">
            <text class="pr-5">{{ orderObj.cost || 0 }}</text>
            <text>云豆</text>
          </view>
        </view>
        <view class="py-10 borderT">
          <view class="disFlxJS linh-26">
            <view>订单编号</view>
            <view class="color6">{{ orderObj.orderNo }}</view>
          </view>
          <view class="disFlxJS linh-26">
            <view>下单时间</view>
            <view class="color6">{{ orderObj.createTime }}</view>
          </view>
        </view>
      </view>
      <view class="borderTop30 disFlxJS linh-50 px-15">
        <view>账户余额</view>
        <view class="color6">
          <text class="pr-5" style="color: #bb9313">{{
            userInfo.balance || 0
          }}</text>
          <text>云豆</text>
        </view>
      </view>
      <view class="borderTop30"></view>
      <view class="px-15 py-15 fexdBtn">
        <u-button
          type="primary"
          :disabled="countdownOver"
          :text="'立即支付 (' + (orderObj.cost || 0) + '云豆)'"
          :customStyle="{
            fontSize: '32rpx',
            borderRadius: '20rpx',
            height: '88rpx',
          }"
          :throttleTime="500"
          @click="confimPlay"
        ></u-button>
      </view>
    </view>

    <NoLogin
      :show="loginShow"
      tips="点击立即登录,登录后即可立即咨询"
      @close="loginShow = false"
      @loginReturn="confirmOrder"
    />

    <StatusPopup
      :show="czShow"
      type="error"
      btnText="去充值"
      @close="czShow = false"
      @confirm="goRecharge()"
    >
      <view class="pt-20">您的余额不足，请充值</view>
    </StatusPopup>

    <OfficialAccount :show="accountShow" @close="_closeFn" />
  </publicPage>
</template> 

<script>
import orderApi from "@/api/order.js";
import StatusPopup from "../components/statusPopup.vue";
import NoLogin from "../components/noLogin.vue";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import OfficialAccount from "@/components/officialAccount.vue";
dayjs.extend(duration);
import { minus } from '@/uview-ui/libs/function/digit.js';


export default {
  computed: {
    // 用户信息
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  components: {
    StatusPopup,
    NoLogin,
    OfficialAccount,
  },
  data() {
    return {
      orderid: "",
      orderObj: {},
      sponsorObj: {}, // 发起人用户信息
      alertTitle: "",
      timer: "", // 定时器
      countdownOver: false, // 倒计时结束
      loginShow: false,
      czShow: false,
      accountShow: false,
    };
  },
  onLoad(options) {
    const that = this;
    if (options.scene) {
      that.orderid = options.scene;

      // 扫码进入
      if (!that.$store.state.userInfo.token || !that.$store.state.userInfo.id) {
        that.loginShow = true;
        return;
      }
      that.confirmOrder();
    } else {
      uni.showToast({
        title: "参数错误!!!",
        icon: "error",
      });
    }
  },
  onUnload() {
    clearTimeout(this.timer);
    this.timer = null;
  },
  methods: {
    minus,
    // 获取待支付订单详情
    confirmOrder() {
      orderApi.confirmOrder({ orderid: this.orderid }).then((res) => {
        if(res.data.callType == 3){
          uni.redirectTo({url: `/pagesC/reserveExp/inspection?scene=${this.orderid}`})
          return
        }
        // 发起人用户信息
        let sponsorIndex = 0;
        res.data.expList.forEach((v, i) => {
          if (v.start === "1") {
            this.sponsorObj = v;
            sponsorIndex = i;
            this.$store.dispatch("sendCustomMessage", {
              type: "scanCode",
              toID: v.id,
              title: "扫码成功",
            }); // 发送扫码成功
          }
        });
        res.data.expList.splice(sponsorIndex, 1); // 删除发起人,不展示

        this.orderObj = res.data;

        if (res.data.status === "0") {
          this.alertTitle = `订单已付费,请勿重新付费`;
          this.countdownOver = true;
          return;
        }

        this.start();
        // 余额不足
        let cost = this.orderObj.callType == 2 ? this.orderObj.makeCost : this.orderObj.cost
        if (this.userInfo.balance < cost) {
          this.czShow = true;
        }
      });
    },
    // 支付订单
    confimPlay() {
      const that = this;
      if (that.userInfo.balance < that.orderObj.cost) {
        that.czShow = true;
        return;
      }
      orderApi.callConfirmOrder({ orderid: that.orderid }).then((res) => {
        this.$store.dispatch("sendCustomMessage", {
          type: "consult",
          toID: this.sponsorObj.id,
          title: "咨询付费",
          meetingData: res.data,
        }); // 发送咨询付费
        uni.showToast({
          title: "支付成功",
          icon: "none",
          complete: () => {
            setTimeout(() => {
              if (!that.userInfo.mpOpenid) {
                // 未关注公众号
                that.accountShow = true;
              } else {
                that.$store.dispatch("getUserInfo");
                that.goBack();
              }
            }, 1500);
          },
        });
      });
    },
    // 去充值
    goRecharge() {
      this.czShow = false;
      this.goPage(
        `/pagesC/recharge/index?czPlice=${
          this.orderObj.cost - this.userInfo.balance
        }`
      );
    },
    // 开始倒计时
    start() {
      const endTime = dayjs(this.orderObj.createTime).add(30, "minute"); // 过期时间
      this.timer = setInterval(() => {
        this.setRemainTime(endTime);
      }, 1000);
      this.setRemainTime(endTime);
    },
    setRemainTime(endTime) {
      const diffTime = dayjs.duration(endTime - dayjs());
      let minutes = diffTime.minutes(); //分钟
      let seconds = diffTime.seconds(); //秒
      minutes = minutes < 10 ? (minutes < 1 ? "00" : "0" + minutes) : minutes;
      seconds = seconds < 10 ? (seconds < 1 ? "00" : "0" + seconds) : seconds;
      this.alertTitle = `等待支付,剩余${minutes}:${seconds}`;
      if (minutes === "00" && seconds === "00") {
        this.alertTitle = `订单已超时,请重新下单`;
        this.countdownOver = true;
        clearTimeout(this.timer);
        this.timer = null;
        console.log("倒计时结束");
      }
    },
    _closeFn() {
      this.accountShow = false;
      this.$store.dispatch("getUserInfo");
      this.goBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.confirmOrder {
  background-color: #ffffff;
  padding-bottom: 150rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

  .alertPos {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  .forBox {
    margin-bottom: 20rpx;

    .leftBox {
      width: 180rpx;
      height: 180rpx;
      margin-right: 30rpx;
      position: relative;
    }

    .rightBox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .fexdBtn {
    background-color: #ffffff;
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    padding-bottom: 30rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  }
}
</style>